//首页
import React, { useState, useEffect } from 'react'
import "../css/Home.css"
import { SearchBar, Swiper, Space, Toast } from 'antd-mobile'
import { RightOutline } from 'antd-mobile-icons'
import { CountDown } from 'react-vant'
import { ExclamationShieldOutline, RedoOutline } from 'antd-mobile-icons'
import axios from "../ulits/https"
import { useNavigate } from "react-router-dom"
import { changenum } from "../store/modules/count"
import { useDispatch } from "react-redux"

export default function Home() {

  const imgArr = ["../img/生鲜蔬菜.jpg", "../img/礼品鲜花.jpg", "../img/玩具.jpg", "../img/运动器械.jpg"]//轮播数据
  //图片轮播
  const items = imgArr.map((color, index) => (
    <Swiper.Item key={index}>
      <img
        alt=""
        src={color}
        className="h3"
      />
    </Swiper.Item>
  ))

  //限时秒杀数据
  const [timeArr, setTimeArr] = useState([])

  //限时秒杀初始数据
  const [three, setThree] = useState([
    {
      "_id": "6645e42935295223062ad270",
      "title": "柳编收纳筐",
      "text": "柳编收纳筐菜篮手提柳藤编织野餐篮水果篮伴手小礼品篮鸡蛋花篮子",
      "price": 39.9,
      "inventory": 80,
      "quantity": 0,
      "Sales": 329,
      "imgUrl": [
        "http://127.0.0.1:3000/upload\\7qNPLu09uexI6MFYMdxkJm6H.jpg",
        "http://127.0.0.1:3000/upload\\WsrWUsP___AIyxZTylY-4cCz.jpg"
      ],
      "cid": 1,
      "ischecked": false,
      "sore": 0,
      "__v": 0
    }
    ,
    {
      "_id": "6645e4be35295223062ad272",
      "title": "野餐篮子",
      "text": "野餐篮子金属编织户外野炊小花水果手提篮铁艺ins购物筐收纳篮",
      "price": 59.9,
      "inventory": 80,
      "quantity": 0,
      "Sales": 182,
      "imgUrl": [
        "http://127.0.0.1:3000/upload\\rbyKA7UlHx8e3z1TVu07za2Y.jpg",
        "http://127.0.0.1:3000/upload\\4Izzy_Wg9iigbH42lKwpPZrR.jpg",
        "http://127.0.0.1:3000/upload\\rvkNCXoX-UAB02SpB8iS6MC4.jpg"
      ],
      "cid": 1,
      "ischecked": false,
      "sore": 0,
      "__v": 0
    },
    {
      "_id": "6645e59d35295223062ad278",
      "title": "野餐篮",
      "text": "柳编手提篮储物筐野餐篮水果篮子花篮收纳筐藤编田园收纳篮摄影篮",
      "price": 66,
      "inventory": 80,
      "quantity": 0,
      "Sales": 482,
      "imgUrl": [
        "http://127.0.0.1:3000/upload\\ErNsu9-C57GCZ2xF3vUhW02N.jpg",
        "http://127.0.0.1:3000/upload\\GZhpkJc8PVhU3dSETGWsl1RY.jpg",
        "http://127.0.0.1:3000/upload\\Qs2Gu9b8eTxAnzbcf2PcghNf.jpg"
      ],
      "cid": 1,
      "ischecked": false,
      "sore": 0,
      "__v": 0
    }
  ])

  //限时秒杀换一批
  const clickA = () => {
    let allArr = timeArr.concat(three)
    let arr = []
    for (let i = 0; i < 3; i++) {
      let index = Math.floor(Math.random() * allArr.length)
      arr.push(allArr[index])
    }
    setThree([])
    setThree(arr)
  }

  //情人节限定数据
  const [fieArr, setFieArr] = useState([])

  //情人节限定初始数据
  const [five, setFive] = useState([
    {
      "_id": "6645a6fbdf219dd1686198ce",
      "title": "淡蓝玫瑰",
      "text": "碎冰蓝玫瑰永生花满天星干花花束情人节生日礼物送闺蜜女友仿真花",
      "price": 99.9,
      "inventory": 80,
      "quantity": 0,
      "Sales": 253,
      "imgUrl": [
        "http://127.0.0.1:3000/upload\\JeEOItmeCqYCwlIlhMI4NNDT.jpg",
        "http://127.0.0.1:3000/upload\\d-DBZKmxp3zguJDKRDeuFWTa.jpg",
        "http://127.0.0.1:3000/upload\\0TaHGCe-uaQNU1Nh7eyQHsm2.jpg"
      ],
      "cid": 2,
      "ischecked": false,
      "sore": 0,
      "__v": 0
    },
    {
      "_id": "66460a8475382d66a88240cc",
      "title": "永生真花仿真花",
      "text": "情人节满天星碎冰蓝玫瑰花束永生真花仿真花干花生日送女友闺蜜",
      "price": 59.9,
      "inventory": 80,
      "quantity": 0,
      "Sales": 526,
      "imgUrl": [
        "http://127.0.0.1:3000/upload\\J5l7g_ZIix6BHB6_GlkERLUJ.jpg",
        "http://127.0.0.1:3000/upload\\3_n2fTfp116DjRHFa0Tr8-8n.jpg",
        "http://127.0.0.1:3000/upload\\V7gAXk0ofbiWzCdMzeaeCV-o.jpg"
      ],
      "cid": 2,
      "ischecked": false,
      "sore": 0,
      "__v": 0
    },
    {
      "_id": "66460ace75382d66a88240ce",
      "title": "玫瑰香皂花束",
      "text": "99朵玫瑰香皂花束永生满天星520情人节送女友毕业礼表白生日礼物",
      "price": 59.9,
      "inventory": 80,
      "quantity": 0,
      "Sales": 5326,
      "imgUrl": [
        "http://127.0.0.1:3000/upload\\1Xi8Uy1onX0TtHpSoDeNGLNf.jpg",
        "http://127.0.0.1:3000/upload\\XB8IY6AldqGBGghKjos5RbUG.jpg",
        "http://127.0.0.1:3000/upload\\O3z0lhGKpxmsUKCviFlqNRoP.jpg"
      ],
      "cid": 2,
      "ischecked": false,
      "sore": 0,
      "__v": 0
    }
  ])

  //情人节限定换一批
  const clickB = () => {
    let allArr = fieArr.concat(five)
    let arr = []
    for (let i = 0; i < 3; i++) {
      let index = Math.floor(Math.random() * allArr.length)
      arr.push(allArr[index])
    }
    setFive([])
    setFive(arr)
  }

  //后端请求数据
  const [list, setList] = useState([])

  //获取数据方法
  const getAll = async () => {
    let list = await axios.get("/list")
    if (list.data.code === 200) {
      setList(list.data.list)
      setTimeArr(list.data.list.filter(item => item.cid === 1))
      setFieArr(list.data.list.filter(item => item.cid === 2))
    }
  }

  //添加购物车
  const addshoop = async (item) => {
    let list = await axios.post("/addshoop", { item })
    if (list.data.code === 200) {
      Toast.show({
        icon: 'success',
        content: list.data.msg,
      })
    }
  }



  //路由
  const navigate = useNavigate()
  //redux
  const dispatch = useDispatch()

  //小球位置
  let [clientX, setClientX] = useState(0)
  let [clientY, setClientY] = useState(0)
  let [isShow, setIsShow] = useState(false)


  useEffect(() => {
    getAll()
  }, [])

  return (
    <div className="h1">
      <div className="h2">优选商城</div>
      <SearchBar
        placeholder='请输入内容'
        className="h4"
      />
      <div className="h7">
        <div className="h8"><span className="h9">热门搜索:</span></div>
        <div className="h8">乐高积木</div>
        <div className="h8">玫瑰花</div>
        <div className="h8">富士苹果</div>
        <div className="h8">乒乓球</div>
      </div>
      <Swiper
        loop
        autoplay
      >
        {items}
      </Swiper>

      <div className="h5">
        <div className="h6">官方正品</div>
        <div className="h6">店家推荐</div>
        <div className="h6">明星代言</div>
        <div className="h6">售后保障</div>
      </div>
      <div className="h10">

        <div className="h11">
          <div className="h12">
            <span className="h14">限时秒杀</span>
            <span>
              <CountDown time={30 * 60 * 60 * 1000} millisecond format="HH:mm:ss:SS">
                {(timeData) => (
                  <>
                    <span className="block">{timeData.hours}</span>
                    <span className="colon">:</span>
                    <span className="block">{timeData.minutes}</span>
                    <span className="colon">:</span>
                    <span className="block">{timeData.seconds}</span>
                  </>
                )}
              </CountDown>
            </span>
          </div>
          <div className="h13">查看全部<Space wrap align='center'>
            <RightOutline fontSize={12} />
          </Space></div>
        </div>

        <div className="h15">
          {
            three.map(item => {
              return <div className="h16">
                <img src={item.imgUrl[0]} alt="" className="h17" />
                <span className="h18">{item.text}</span>
                <span className="h19">￥{item.price}</span>
                <span className="h20">
                  <Space wrap align='center'>
                    <ExclamationShieldOutline fontSize={12} />
                  </Space>售后保障</span>
              </div>
            })
          }
          <div className="h21" onClick={() => {
            clickA()
          }}>
            换一批<Space wrap align='center'>
              <RedoOutline fontSize={20} />
            </Space>
          </div>
        </div>

        <div className="h11">
          <div className="h12">
            <span className="h14">情人节限定</span>
          </div>
          <div className="h13" onClick={() => {
            navigate("/index/classify?cname=礼品鲜花")
            dispatch(changenum("/index/classify"))
          }}>查看全部<Space wrap align='center'>
              <RightOutline fontSize={12} />
            </Space></div>
        </div>

        <div className="h15">
          {
            five.map(item => {
              return <div className="h16">
                <img src={item.imgUrl[0]} alt="" className="h17" />
                <span className="h18">{item.text}</span>
                <span className="h19">￥{item.price}</span>
                <span className="h20">
                  <Space wrap align='center'>
                    <ExclamationShieldOutline fontSize={12} />
                  </Space>售后保障</span>
              </div>
            })
          }
          <div className="h21">
            换一批<Space wrap align='center' onClick={() => {
              clickB()
            }}>
              <RedoOutline fontSize={20} />
            </Space>
          </div>
        </div>

        <div className="h11">
          <div className="h12">
            <span className="h14">品牌推荐</span>
          </div>
        </div>

        <div className="h22">
          {
            list.map(item => {
              return <div key={item._id} className="h23">
                <img src={item.imgUrl[0]} alt="" className="h24" onClick={() => {
                  navigate(`/detail?id=${item._id}`)
                }} />
                <div className="h25">{item.text}</div>
                <div className="h26">￥{item.price}</div>
                <div className="h27">
                  <Space wrap align='center'>
                    <ExclamationShieldOutline fontSize={12} />
                  </Space>售后保障
                </div>
                <div className='h28' onClick={(evt) => {
                  addshoop(item)
                  setClientX(evt.clientX)
                  setClientY(evt.clientY)
                  setIsShow(true)
                  setTimeout(() => {
                    setIsShow(false)
                  }, 480)
                }}>
                  +
                </div>
              </div>
            })
          }
        </div>
        <div className="h29"></div>
      </div>

      <div id="ball-qiu" style={{ left: clientX - 15, top: clientY - 15, display: isShow ? "block" : "none" }}>+</div>

    </div>
  )
}
